<template>
    <div class="ViewScreen">
        <cesium-viewer @viewerAlready="viewerAlready">
        </cesium-viewer>
        <div>
            <video ref="trailer" id="trailer" muted="" autoplay="" loop="" crossorigin="" controls="">
                <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.webm"
                        type="video/webm">
                <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4"
                        type="video/mp4">
                <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mov"
                        type="video/quicktime">
                Your browser does not support the <code>video</code> element.
            </video>
        </div>
    </div>
</template>

<script>
    import CesiumViewer from "../../CesiumViewer";

    export default {
        name: "ViewScreen",
        //import引入的组件需要注入到对象中才能使用",
        components: {CesiumViewer},
        data() {
            //这里存放数据",
            return {};
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            viewerAlready() {
                this.viewScreenWall();
            },
            viewScreenWall() {
                const video = this.$refs.trailer;
                let entities = viewer.entities;
                let screenWall = entities.add({
                    wall: {
                        positions: Cesium.Cartesian3.fromDegreesArray([
                            110.0,
                            40.0,
                            120.0,
                            40.0
                        ]),
                        maximumHeights: [500000, 500000],
                        minimumHeights: [100000, 100000],
                        material: video,
                    },
                });
                //视角定位至entity
                viewer.zoomTo(
                    screenWall,
                    new Cesium.HeadingPitchRange(0.0, 0.0, 0.0)
                );
                // {
                //     heading: 0.0,
                //     pitch: 0.0,
                //     roll: 0.0
                // }
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    .ViewScreen {
        position: relative;
    }

    #trailer {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 320px;
        height: 180px;
        /*display: none;*/
    }
</style>

